<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8" lang="zh">
    <title>用户管理</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- 引入bootstrap -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- echarts -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="../../static/js/westeros.js"></script>
    <!--vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- <script src="/static/js/vue.min.js"></script> -->
    <!-- MDUI -->
    <link rel="stylesheet" href="//cdnjs.loli.net/ajax/libs/mdui/0.4.3/css/mdui.min.css">
    <script src="//cdnjs.loli.net/ajax/libs/mdui/0.4.3/js/mdui.min.js"></script>

    <style media="screen">

        #nav {
            width: 250px;
            height: 1224px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 3px 0px 15px rgba(0, 0, 0, 0.05);
            opacity: 1;
            padding-top: 28px;
            float: left;
        }

        ul {
            list-style: none;
            padding: 0;
        }

        #logo {
            width: 68px;
            height: 40px;
            font-size: 30px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            line-height: 26px;
            color: rgba(71, 137, 255, 1);
            opacity: 1;
            /*padding-left: 106px;*/
            /*padding-right: 72px;*/
            /*padding-bottom: 52px;*/
            margin-left: 106px;
            margin-top: 55px;
            margin-bottom: 31px;

        }

        #nav ul li {
            height: 88px;
        }

        #nav img {
            padding-left: 68px;
        }

        #nav a {
            width: 52px;
            height: 16px;
            font-size: 19px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 88px;
            color: rgba(158, 173, 197, 1);
            margin-left: 17px;
            letter-spacing: 3px;
            text-decoration: none;
            opacity: 1;
        }

        #nav ul .usermanage {
            background: linear-gradient(90deg, rgba(71, 137, 255, 1) 0%, rgba(71, 137, 255, 1) 2%, rgba(71, 137, 255, 0.47) 3%, rgba(71, 137, 255, 0.1) 56%, rgba(36, 69, 128, 0) 100%);
            border-radius: 3px;
        }

        #user {
            float: right;
            /*margin-top: 56px;*/
            /*margin-left: 1383px;*/
            margin-right: 58px;
            display: inline-block;
            padding-bottom: 42px;
        }

        .usertype, .usertype:active, .usertype:hover, .usertype:visited {
            width: 59px;
            height: 21px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            line-height: 21px;
            color: rgba(158, 173, 197, 1);
            opacity: 1;
            text-decoration: none;
            margin-left: 33px;
        }

        table {
            /*float: left;*/
            border-collapse: separate;
            white-space: nowrap;
            width: 100%;
        }

        table thead {
            width: 100%;
            height: 51px;
            background: rgba(244, 247, 251, 1);
            opacity: 1;
            border-radius: 7px;
        }

        table tr:first-child th:first-child {
            border-top-left-radius: 7px;
            border-bottom-left-radius: 7px;
        }

        table tr:first-child th:last-child {
            border-top-right-radius: 7px;
            border-bottom-right-radius: 7px;
        }

        table th {
            text-align: center;
            font-size: 15px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 38px;
            opacity: 1;
            color: #9EADC5;
        }

        table td {
            text-align: center;
            /*width: 24px;*/
            height: 53px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 40px;
            color: rgba(77, 98, 130, 1);
            opacity: 1;
        }

        .right {
            position: absolute;
            left: 307px;
            top: 35px;
        }

        .status {
            width: 70.77px;
        }

    </style>

    <script type="text/javascript">
        function display(x) {
            x.style.background = "linear-gradient(90deg,rgba(71,137,255,0.47) 0%,rgba(71,137,255,0.1) 56%,rgba(36,69,128,0) 100%)";
            var name = x.className;
            name = "../../static/image/index/" + name + "(1).png";
            // alert(name);
            x.firstElementChild.src = name;
        }

        function normal(x) {
            x.style.background = "#FFFFFF";
            var name = x.className;
            name = "../../static/image/index/" + name + ".png";
            // alert(name);
            x.firstElementChild.src = name;
        }

        function hover(x) {
            x.style.background = "rgba(244,247,251,0.5)";
        }

        function dishover(x) {
            x.style.background = "#FFFFFF"
        }
    </script>


</head>

<body style="background:rgba(244,247,251,1);">


<!-- 导航条 -->
<div id="nav">
    <div id="logo">logo</div>
    <ul>
        <li class="managedata" onmouseover="display(this)" onmouseout="normal(this)">
            <img src="../../static/image/index/managedata.png"/>
            <a href="/index">运营数据</a>
        </li>
        <li class="usermanage">
            <img class="img" src="../../static/image/index/usermanage.png"/>
            <a href="/udo/query">用户管理</a>
        </li>
        <li class="hotelmanage" onmouseover="display(this)" onmouseout="normal(this)">
            <img src="../../static/image/index/hotelmanage.png"/>
            <a href="#">酒店事务</a>
        </li>
        <li class="hotelmoney" onmouseover="display(this)" onmouseout="normal(this)">
            <img src="../../static/image/index/hotelmoney.png"/>
            <a href="#">酒店财务</a>
        </li>
        <li class="basesettings" onmouseover="display(this)" onmouseout="normal(this)">
            <img src="../../static/image/index/basesettings.png"/>
            <a href="#">基础配置</a>
        </li>
        <li class="backstagesettings" onmouseover="display(this)" onmouseout="normal(this)">
            <img src="../../static/image/index/backstagesettings.png"/>
            <a href="#">后台设置</a>
        </li>
    </ul>
</div>

<div class="right">
    <!-- 用户 -->
    <div id="user">
        <img src="../../static/image/index/帮助.png"/>
        <img src="../../static/image/index/通知.png" style="margin-left:36px;"/>
        <img src="../../static/image/index/图像 2.png"
             style="width:40px;height:40px;background:rgba(255,255,255,1);border-radius:50%;opacity:1;margin-left:28px;"/>
        <img src="../../static/image/index/路径 1146@2x.png" style="width:7px;"/>
    </div>

    <!--用户表单-->
    <div class="usertable"
         style="padding-top:28px;padding-left:5px;padding-right:5px;background: #FFFFFF;border-radius: 10px;box-shadow:0px 0px 10px rgba(0,0,0,0.01);overflow:auto;width: 1525px">
        <!--    用户类型切换-->
        <div>
            <a href="#" class="usertype" style="color: #4F4F4F">全部用户
            </a>
            <a href="#" class="usertype">VIP用户</a>
            <a href="#" class="usertype">处理中</a>
        </div>
        <!--    查询框-->
        <div style="float:left;margin-left:30px;margin-top:35px;margin-right:600px;padding-right:2px;width:206px;height:32px;border:1px solid rgba(228,228,228,1);opacity:1;border-radius:16px;">
            <img src="../../static/image/user/search.png"
                 style="width: 16px;margin-left: 10px;float: left;margin-top:8px;margin-right: 3px;"/>
            <input type="text" value="输入关键词" onclick="clearvalue(this)" onblur="defaultvalue(this)"
                   style="height: 30px;width: 120px;border: none;outline: none;color: #E4E4E4;padding: 0px;">
            <a href="#"
               style="float:right;margin-top:2px;width:41px;height:26px;background:rgba(239,240,245,1);opacity:1;border-radius:18px;">
                <img src="../../static/image/index/backstagesettings(1).png"
                     style="width: 16px;margin-left: 13px;margin-top:4px;"/>
            </a>
        </div>
        <script>
            function clearvalue(x) {
                x.value = "";
            }

            function defaultvalue(x) {
                if (x.value == "") {
                    x.value = "请输入关键词";
                }
            }
        </script>

        <!--    用户添加-->
        <a class="mdui-btn mdui-btn-raised mdui-ripple mdui-text-color-white-text" href="/udo/add"
           style="float:right;margin-top:31px;margin-bottom:33px;margin-right:32px;width:139px;height:45px;background:rgba(71,137,255,1);opacity:1;border-radius:23px;text-decoration: none;">
            <i class="mdui-icon material-icons mdui-icon-left " style="font-size: 25px;margin-top: 5px">&#xe145;</i>
            <div style="width:48px;height:16px;font-size:15px;font-family:Microsoft YaHei;font-weight:400;line-height:16px;color:rgba(255,255,255,1);opacity:1;margin-top: 14px;">
                添加用户
            </div>
        </a>

        <table id="table">
            <thead>
            <tr>
                <th>姓名</th>
                <th>房间号</th>
                <th>订单状态</th>
                <th>订单内容</th>
                <th>智控权限</th>
                <th>交易时间</th>
                <th>实际支付</th>
                <th>操作</th>
            </tr>
            <tr style="height: 13px"></tr>
            </thead>
            <tbody>
            {% for user in user_list %}
                <tr onmouseover="hover(this);" onmouseout="dishover(this);">
                    <td>{{ user.name }}</td>
                    <td>{{ user.room.room_number }}</td>
                    <td>
                        {% if user.status == 0 %}
                            <img class="status" src="../../static/image/user/success.png"/>
                        {% elif user.status == 1 %}
                            <img class="status" src="../../static/image/user/ok.png"/>
                        {% elif user.status == 2 %}
                            <img class="status" src="../../static/image/user/wait.png"/>
                        {% elif user.status == 3 %}
                            <img class="status" src="../../static/image/user/ing.png"/>
                        {% endif %}
                    </td>
                    <td>{{ user.room.type }}</td>
                    <td>
                        <img src="../../static/image/user/green.png" style="margin-bottom:4px;width: 8.69px;"/>
                        &nbsp;授权
                    </td>
                    <td>{{ user.reg_date }}</td>
                    <td>{{ user.room.price }}</td>
                    <td>
                        <a href="/udo/update{{ user.id }}">
                            <img src="../../static/image/user/操作.png" style="width: 21px"/>
                        </a>
                    </td>

                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>

    <script src="//www.mdui.org/source/dist/js/mdui.min.js"></script>
</div>
</body>
